import React from 'react'
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import {  Layout, Menu, theme } from 'antd';
import {useNavigate,useLocation} from 'react-router-dom';

const {  Sider } = Layout;

const items2 = [
  {
    key:"/Home/Firstpage",
    label:"首页",
    roles:['超级管理员']
},
{
  key:"shop-management",
  label:"店铺管理",
  children:[
      {
          key:"/Home/shopList",
          label:"店铺列表"
      },
      {
          key:"/Home/addShop",
          label:"新增店铺",
          roles:['超级管理员']
      },
  ]
},
{
  key:"account-management",
  label:"账号管理",
  children:[
      {
          key:"/Home/AccountList",
          label:"账号列表"
      },
      {
          key:"/Home/AddAcount",
          label:"新增账号",
          roles:['超级管理员']
      },
  ]
},
{
  key:"goods-management",
  label:"商品管理",
  children:[
      {
          key:"/Home/GoodsList",
          label:"商品列表"
      },
      {
          key:"/Home/AddGoods",
          label:"添加商品",
          roles:['超级管理员']
      },
  ]
},
{
  key:"sale-management",
  label:"销售统计",
  children:[
      {
          key:"/Home/OrderStatistics",
          label:"订单统计"
      },
      {
          key:"/Home/GoodsStatistics",
          label:"商品统计"
      },
  ]
},

]


export default function HomeSider() {

  const navigate =  useNavigate()
  // 拿到路由上的参数
   const location = useLocation();
   const {role} = JSON.parse(localStorage.userInfo)
   console.log("location",location)
    const {
        token: { colorBgContainer },
      } = theme.useToken();

     function  clickMenu(item){
      console.log("item",item)
      let backNav=item.keyPath[1]
      navigate(item.key,{state:backNav})

     }

  function filterdata(arr,role) {
      return arr.filter(item=>!item.roles || item.roles.includes(role)).map(item=>{

         const m={
          ...item
         }

          if (item.children) {
                m.children=filterdata(item.children,role)
          }
          return m
      })
  }

  return (
    <Sider
    width={200}
    style={{
      background: colorBgContainer,
    }}
  >
    <Menu
      mode="inline"
      selectedKeys={[location.pathname]}
      defaultOpenKeys={[location.state]}
      style={{
        height: '100%',
        borderRight: 0,
      }}
      items={filterdata(items2,role)}
      onClick={clickMenu}
    />
  </Sider>
  )
}
